Ext.define('planner.view.Requeres.RequeresForum', {
    extend: 'Ext.tree.Panel', 
    alias : 'widget.RequeresForum',
    title: 'RequeresForum',
    itemSelector: 'div.thumb-wrap',
    requires: [
        'planner.store.Requeres',
    ],
    rootVisible: false,
    store: Ext.create('planner.store.Requeres'),
    collapsible: false,
    collapsed: false,
    columns:[
        {
            xtype: 'templatecolumn',
            text: 'Date',
            width: 80,
            sortable: true,
            dataIndex: 'date',
            align: 'left',
            tpl: Ext.create('Ext.XTemplate', 
                '{date: this.date}',
                {
                    disableFormats: false,
                    date: function(seconds) {
                        return 'ft' + seconds/1000;
                    }
                }
            )
        },
        {
            xtype: 'templatecolumn',
            text: 'Source',
            width: 150,
            sortable: true,
            dataIndex: 'source',
            align: 'left',
            //add in the custom tpl for the rows
            tpl: Ext.create('Ext.XTemplate', 
                '{source}'
            )
        },
        {
            xtype: 'templatecolumn',
            text: 'Requere',
            flex: 9,
            sortable: true,
            dataIndex: 'title',
            align: 'left',
            //add in the custom tpl for the rows
            tpl: Ext.create('Ext.XTemplate', 
                '<div style="margin-bottom: 10px; padding-left: {level*50}px;" class="thumb-wrap">',
                    '<h1>{title}</h1>',
                    '<div>{body}</div>',
                    //'<tpl if="leaf == 1">',
                        '<input id="require-swim-editor-{id}" class="require-swim-editor" type="textarea" onkeyup="Ext.getCmp(\'RequeresForum-mainPage\').addRequire(event, {id})"/>',
                    //'</tpl>',
                '</div>'
            )
        },
        {
            xtype: 'templatecolumn',
            text: 'State',
            width: 100,
            sortable: true,
            dataIndex: 'state',
            align: 'left',
            //add in the custom tpl for the rows
            tpl: Ext.create('Ext.XTemplate', 
                '{state}'
            )
        },
    ],
    listeners: {
        itemclick: function(view, record, item) {
            console.log(item)
            this.expandAll()
            /*var node = view.getNode(item)
            var p = Ext.create('Ext.form.Panel', {
                width: 100,
                height: 100,
                items:[
                    {
                        xtype     : 'textareafield',
                        grow      : true,
                        name      : 'message',
                        fieldLabel: 'Message',
                        anchor    : '100%'

                    },
                    {
                        xtype: 'datefield',
                        fieldLabel: 'Start date'
                    }, {
                        xtype: 'datefield',
                        fieldLabel: 'End date'
                    }
                ]
            });
           var w = Ext.create('Ext.Window', {
                plain: true,
                title: 'Hello',
                //frameHeader: false,
                modal: true,
                height: 200,
                width: 400,
                closable: false,
                layout: 'fit',
                renderTo: view.parent,
                items: [p]
            });

            w.show();
            node.insertAfter('<input class="require-swim-editor" type="textarea" />')*/

            //p.renderTo(item)
        },
        render: function(v) {
            var me = this;
          //p.render(document.body);
        /*v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
                getDragData: function(e) {
                    var sourceEl = e.getTarget(v.itemSelector, 10), d;
                    if (sourceEl) {
                        console.log(sourceEl + ', data=' + v.getRecord(sourceEl).data.name);
                        d = sourceEl.cloneNode(true);
                        d.id = Ext.id();
                        return v.dragData = {
                            sourceEl: sourceEl,
                            repairXY: Ext.fly(sourceEl).getXY(),
                            ddel: d,
                            blockData: v.getRecord(sourceEl)
                        };
                    }
                },
                getRepairXY: function() {
                    return this.dragData.repairXY;
                }
            });
            v.dragZone.addToGroup('g1');

            this.dropZone = new Ext.dd.DropZone(this.getEl(), {
                getTargetFromEvent: function(e) {
                    return e.getTarget('.thumb-wrap');
                },
                onNodeDrop : function(target, dd, e, data) {
                    var r = me.getRecord(target);
                    console.log('CommonDiagramm onNodeDrop type=' + data.blockData.get('name') + ', ' + target + ', ' + r.get('name'));
                    if(data.blockData.self.getName() == 'planner.model.Jobs')
                        me.fireEvent('linkJobToParent', me, r, data.blockData);
                    else if(data.blockData.self.getName() == 'planner.model.Users')
                        me.fireEvent('linkDeveloperToJob', me, data.blockData, r);

                    
                    return true;
                }
            });
*/
        }
    },
    initComponent: function(arguments) {
        var me = this;
        //me.store.filter('parent', '-1')
        this.callParent(arguments);
        me.expandAll();
    },
    addRequire: function(event, parentId) {
        if(event.keyCode == 13) {
            var text = Ext.get('require-swim-editor-' + parentId).getValue()
            this.fireEvent('addRequireEvent', parentId, text)
        }
    }
}); 
